<script setup>
import { ref ,onMounted} from "vue";
/**
 * canvas2
 */
const canvasRef2 = ref(null);
let TouchFlag = false;
// Flag切り替え用関数
function onDown(e) {
  TouchFlag = true;
}
function onUp(e) {
  TouchFlag = false;
}
// 図形描画時アクション関数
function mousemove(e) {
  console.log("mousemove");
  if (TouchFlag) {
    drawCalc(e);
  }
}
function onClick(e) {
  drawCalc(e);
}
// 図形描画関数
function drawCalc(e) {
  // canvas2の位置座標を取得（絶対座標）
  // canvas2の位置座標を取得（絶対座標）
  var clientRect = canvasRef2.value.getBoundingClientRect();
  var xRect = clientRect.left;
  var yxRect = clientRect.top;
  // ページの左端から、要素の左端までの距離
  var px = window.pageXOffset + clientRect.left;
  var py = window.pageYOffset + clientRect.top;
  const x = e.pageX - px;
  const y = e.pageY - py;
  const ctx2 = canvasRef2.value.getContext("2d");
  ctx2.fillStyle = "#FF9158";
  ctx2.fillRect(x, y, 2, 2);
}
// Flag切り替えイベント
document.body.addEventListener("mousedown", onDown, false);
document.body.addEventListener("mouseup", onUp, false);
// 図形描画時イベント
// canvasRef2.value.addEventListener("click", onClick, false);
// canvasRef2.value.addEventListener("mousemove", mousemove, false);

/******************************************************************
 * 点击画图形
 ******************************************************************/
var myCanvas = ref(null);

onMounted(() => {
      
      // 在这里操作canvas
      drawShape();
      
});

var shapeTypeRef = ref("rect");
const toggleShape = function(){
    shapeTypeRef.value  = shapeTypeRef.value == "rect" ? "circle" : "rect";
    drawShape();
}


const drawShape = function(){
    const canvas = myCanvas.value;
    var ctx = canvas.getContext("2d");

    var isDrawing = false; // 是否正在绘制
    // var shapeType = "rect"; // 绘制形状类型（矩形或圆形）
    var shapeType = shapeTypeRef.value ;
    var startX, startY; // 起始点坐标

    canvas.addEventListener("mousedown", function (e) {
    isDrawing = true;
    startX = e.clientX - canvas.offsetLeft;
    startY = e.clientY - canvas.offsetTop;
    });

    canvas.addEventListener("mousemove", function (e) {
    if (isDrawing) {
        var endX = e.clientX - canvas.offsetLeft;
        var endY = e.clientY - canvas.offsetTop;

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        if (shapeType === "rect") {
        ctx.fillRect(startX, startY, endX - startX, endY - startY);
        } else if (shapeType === "circle") {
        var radius = Math.sqrt(
            Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2)
        );
        ctx.beginPath();
        ctx.arc(startX, startY, radius, 0, 2 * Math.PI);
        ctx.fill();
        }
    }
    });

    canvas.addEventListener("mouseup", function () {
    isDrawing = false;
    });

    document.addEventListener("keydown", function (e) {
    if (e.key === "r") {
        shapeType = "rect";
    } else if (e.key === "c") {
        shapeType = "circle";
    }
    });
}


/**
 * 把screenshotElement的div上的元素输出到新创建的canvas
 */
var screenshotElement = ref(null);
function captureScreenshot() {
    
      // 获取要截图的div元素
      const element = screenshotElement.value;

      // 创建canvas元素
      const canvas = document.createElement('canvas');
      console.log(element.offsetWidth,element.offsetHeight);


      canvas.width = element.offsetWidth;
      canvas.height = element.offsetHeight;

      // 绘制div元素内容到canvas上
      const ctx = canvas.getContext('2d');
      ctx.drawImage(element, 0, 0);

      // 将canvas转换为图像数据URL
      const dataURL = canvas.toDataURL();

      // 在控制台输出图像数据URL，以便调试
      console.log(dataURL);
}



</script>
<template>
  <div>
    <canvas
      ref="canvasRef2"
      id="canvas2"
      @click="onClick($event)"
      @mousemove="mousemove($event)"
    ></canvas>

    <canvas ref="myCanvas" class= "drawshape" width="500" height="500"></canvas>
    <button @click="toggleShape()">toggle</button>


    <button @click="captureScreenshot">截图</button>
    <div class="A" ref="screenshotElement">
      <!-- 要截图的内容 -->
      <img src="https://gitee.com/static/images/logo-black.svg?t=158106664"/>
    </div>

  </div>
</template>
<style>
#canvas2 {
  background: #666;
}
.drawshape{
    background: yellow;
}
</style>